<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>京东商城</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.slider {
				height: 340px;
				width: 790px;
				margin: 100px auto;
				position: relative;
			}
			.slider li {
				position: absolute;
				display: none;
			}
			.slider li:first-child {
				display: block;
			}
			.arrow {
				display: none;
			}
			.slider:hover .arrow {
				display: block;
			}
			.arrow-left,
			.arrow-right {
				font-family: simsun;
				width: 30px;
				height: 60px;
				background-color: rgba(0,0,0,0.1);
				position: absolute;
				top: 50%;
				margin-top: -30px;
				cursor: pointer;
				text-align: center;
				line-height: 60px;
				color: #fff;
				font-weight: 700;
				font-size: 30px;
			}
			.arrow-left:hover,
			.arrow-right:hover {
				background-color: rgba(0,0,0,.5);
			}
			.arrow-left {
				left: 0;
			}
			.arrow-right {
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="slider">
			<ul>
				<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/7.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/8.jpg" alt=""></a></li>
			</ul>
			<div class="arrow">
				<span class="arrow-left">$lt;</span>
				<span class="arrow-right">$gt;</span>
			</div>
		</div>
		
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var count = 0;
				$(".arrow-right").click(function(){
					count++;
					if(count == $(".slider li").length) {
						count = 0;
					}
					console.log(count);
					//让count渐渐的显示,其他兄弟贱贱的隐藏
					$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
				});
				$(".arrow-left").click(function (){
					count--;
					if(count == -1){
						count = $(".slider li").length - 1;
					}
					console.log(count);
					//让count渐渐的显示,其他兄弟渐渐的隐藏
					$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
				});
			});
		</script>
	</body>
</html>